<!-- 船代结算 -->
<template>
  <div class="ship-settlement-dialog">
    <el-dialog
      width="900px"
      class=""
      top="6vh"
      title="结算"
      :visible="$store.state.dialog.shipSettlement"
      @close="close">
      <el-row>
        <el-col :span="24">
          <el-card shadow="hover">
            <el-form :model="order" res="order" size="mini">
              <el-row>
                <el-col :span="11">
                  <el-form-item>
                    <el-date-picker
                      class="time-small"
                      v-model="order.myTime"
                      type="daterange"
                      @change="setChange()"
                      value-format="yyyy-MM-dd"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-button type="success" size="mini" v-if="loadShow" :disabled="multipleSelection1.length === 0 ? 'disabled' : false" @click="settlement()">提交</el-button>
                  <el-button type="primary" size="mini" v-else :loading="true">加载中</el-button>
                </el-col>
                <el-col :span="4" v-if="shipAgencyId">
                  <span>总金额：{{totalAmount}}</span>
                </el-col>
                <el-col v-if="shipAgencyId" :span="5">
                  <el-form-item>
                    <el-input v-model="order.serchof" @input="searchYard()" placeholder="搜索"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-table
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.5)"
              border
              :data="settlementData"
              v-if="shipAgencyId"
              max-height="600px"
              :cell-style="feeRowClass"
              @selection-change="handleSelectionChange1"
              style="width: 100%">
              <el-table-column type="selection" align="center" width="50"></el-table-column>
              <el-table-column
                align="center"
                width="110"
                prop="shipAgencyName"
                label="船代">
              </el-table-column>
              <el-table-column
                align="center"
                width="110"
                prop="createTime"
                label="日期">
              </el-table-column>
              <el-table-column
                align="center"
                prop="blno"
                width="150"
                label="提单号">
              </el-table-column>
              <el-table-column
                align="center"
                prop="boxType"
                width="100"
                label="箱型箱量">
              </el-table-column>
              <el-table-column
                align="center"
                prop="txfFee"
                label="提箱费">
              </el-table-column>
              <el-table-column
                align="center"
                prop="ddfFee"
                label="打单费">
              </el-table-column>
              <el-table-column
                align="center"
                prop="fwfFee"
                label="服务费">
              </el-table-column>
              <el-table-column
                align="center"
                prop="abfFee"
                label="安保费">
              </el-table-column>
              <el-table-column
                align="center"
                prop="cqfFee"
                label="超期费">
              </el-table-column>
              <el-table-column
                align="center"
                prop="qtFee"
                label="其他">
              </el-table-column>
              <el-table-column
                align="center"
                prop="putBoxNote"
                :width="this.maxw * 8 + 50 + 'px'"
                label="备注">
              </el-table-column>
            </el-table>
            <div class="salesman-man-pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pageNo"
                :page-sizes="[15, 20, 30]"
                :page-size="number"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  shipSettleList,
  shipSettlement
} from '../../api/finance'
export default {
  data () {
    return {
      order: {
        yardid: '',
        myTime: [this.formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), 1)), this.formatDate(new Date())],
        serchof: '' // 搜索
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      multipleSelection1: [],
      totalAmount: '',
      btwidth: [],
      maxw: 0,
      pageNo: 1,
      number: 15,
      total: 0,
      loading: true,
      key: true,
      loadShow: true,
      settlementData: []
    }
  },
  watch: {
    '$store.state.dialog.shipSettlement' (value) {
      if (this.shipAgencyId !== '' && value) {
        this.getNoSettlementList(1, 15)
      }
    }
  },
  props: {
    shipAgencyId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  methods: {
    close () {
      this.$store.commit('hide_ship_settlement_dialog')
    },
    // 获取未结算列表
    async getNoSettlementList (pg, nb) {
      if (this.order.myTime === null) {
        this.order.myTime = []
      }
      const res = await shipSettleList({
        startTime: this.order.myTime[0],
        endTime: this.order.myTime[1],
        shipAgencyId: this.shipAgencyId,
        curpage: pg, // 页码
        pageSize: nb, // 页数
        blno: '' // 提单号
      })
      if (res.status === 200) {
        if (res.data.length === 0) {
          this.totalAmount = 0
          this.settlementData = []
        } else {
          this.settlementData = res.data[0].feeList
          this.totalAmount = res.data[0].feeTotal
          this.settlementData.map(item => {
            this.btwidth.push(item.putBoxNote.length)
          })
          this.maxw = Math.max.apply(null, this.btwidth)
        }
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    // 结算
    async settlement () {
      this.loadShow = false
      let that = this
      let arr1 = []
      this.multipleSelection1.map(item => {
        arr1.push(item.userCode)
      })
      const res = await shipSettlement({
        startTime: this.order.myTime[0], // 开始时间
        endTime: this.order.myTime[1], // 结束时间
        userCode: arr1 // 箱子编号数组
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        setTimeout(function () {
          that.loadShow = true
        }, 500)
        this.getNoSettlementList(1, 15)
        this.$parent.getShipSettementList(1, 15)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    setChange () {
      if (this.shipAgencyId !== '') {
        this.getNoSettlementList(1, 15)
      }
    },
    // 转换日期
    formatDate (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '-' + m + '-' + d
    },
    feeRowClass ({row, column, rowIndex, columnIndex}) {
      if (column.label === '备注') {
        return 'color: #3c8dbc'
      }
    },
    handleSelectionChange1 (val) {
      this.multipleSelection1 = val
    },
    // 搜索
    searchYard () {
      let search = this.order.serchof.toLowerCase()
      let arr = []
      if (search === '') {
        this.getNoSettlementList(1, 15)
        return false
      }
      this.settlementData.map(item => {
        for (let key in item) {
          if (String(item[key]).toLowerCase().indexOf(search) !== -1) {
            arr.push(item)
          }
        }
      })
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i] === arr[j]) {
            arr.splice(j, 1)
            j--
          }
        }
      }
      this.settlementData = arr
    },
    handleCurrentChange (val) {
      this.getNoSettlementList(val, this.number)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.getNoSettlementList(this.pageNo, val)
      this.number = val
    }
  }
}
</script>

<style scoped lang="less">

</style>
